<template>
   <div>
   <el-input
     placeholder="请输入内容"
     v-model="input2"
     suffix-icon="el-icon-search"
     size="small"
     @input="search"
     >
    </el-input>
  <!-- 单选框 -->
  <el-radio-group v-model="radio"  @change="change">
    <el-radio :label="0">所以联系人</el-radio>
    <el-radio :label="1">亲人</el-radio>
    <el-radio :label="2">朋友</el-radio>
    <el-radio :label="3">同学</el-radio>
  </el-radio-group>



  <!-- 所有联系人 -->
   <div class="artical">
           <ul>
                <li v-for="(item,index) in phoneArr" :key="index"
                 @mouseenter="onMouseEnter(item.id)"
                 @mouseleave="onMouseLeave"
                >
              
                  <img src="../assets/logo.png" alt="">
                  <h3 v-if="flag!=index">
                        <p>{{item.name}}</p>
                        <p>{{item.tel}}</p>
                  </h3>
                  <!-- 两个输入框 -->
                  <h3 v-if="flag==index">
                       <input type="text" v-model="name" ref="editInput"
                       
                       ><br>
                       <input type="text" v-model="tel">
                  </h3>
                 
                  <!-- 编辑按钮和删除按钮 -->
                  <h3 v-show="isBtnShow&&item.id==rowId">
                      <el-button type="primary" icon="el-icon-edit" circle autofocus  size="small"
                      @click="edit(item.id,index)"
                      ></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle
                       size="small"
                       @click="del(item.id)"
                       ></el-button>
                  </h3>
                  <!-- 对勾和x号 -->
                  <h3 v-show="isShow&&item.id==rowId">
                      <el-button type="text" icon="el-icon-check" circle autofocus  size="small"
                      @click="sure(item.id)"
                      ></el-button>
                      <el-button type="text" icon="el-icon-close" circle
                       size="small"
                       @click="close"
                       ></el-button>
                  </h3>





                  <!-- <h3>
                        <input type="text" v-model="item.name" v-show="flag==index">
                        <input type="text" v-model="item.tel" v-show="flag==index">
                  </h3> -->
                  <!-- <h3 v-show="isBtnShow&&rowId==item.id">
                     <el-button type="primary" icon="el-icon-edit" circle size="small"
                     @click="edit(item.id,index)"></el-button >
                     <el-button type="danger" icon="el-icon-delete" circle size="small"
                     @click="del(item.id)"
                     ></el-button>
                  </h3> -->


                   <!-- <h3 v-show="isShow&&rowId==item.id">
                     <el-button type="text" icon="el-icon-check" circle size="small"
                     @click="openFn"
                    ></el-button >
                     <el-button type="text" icon="el-icon-close" circle size="small"
                      @click="close"
                    
                     ></el-button>
                  </h3> -->
                   
                </li>
           </ul>

   </div>
   </div>
</template>

<script>
import {getPhoneListApi,getsearchListApi,deleteListApi,editApi} from "@/utils/https.js"
export default {
    data(){return {input2:"",
                   radio: 0,
                   phoneArr:[],
                   isBtnShow:false,//编辑按钮和删除按钮是否显示
                   rowId:"",//存某一个id
                   isShow:false,//对勾和x号 是否显示
                   name:"",//输入框的内容
                   tel:"",//输入框的内容
                   flag:"NaN"
                   
                 
                   }
          },
    created(){
          this.getPhone()
    },
    methods:{
      //  封装一下获取数据的方法
         getPhone(){
            getPhoneListApi({keyword:this.input2}).then(res=>{
                              this.phoneArr=res
                           })
         },
         //点击单选按钮的事件
        change(val){
            getsearchListApi({label:val}).then(res=>{
              this.phoneArr=res
            })
        },
        //搜索事件
        search(){
            this.getPhone()
        },
        //移入事件
        onMouseEnter(id){
          if(this.flag=="NaN"){
             this.isBtnShow=true
          }
          
          this.rowId=id
        },
        //移出事件
        onMouseLeave(){
          this.isBtnShow=false
          this.isShow=false
          this.flag="NaN"
        },
        //删除事件
        del(val){
         
            deleteListApi({id:val}).then(res=>{
               if(res.code==0){
                  this.getPhone() 
               }
            })

        },
        //编辑事件
        edit(val,index){
           //val 是id index是下标
            this.isBtnShow=false;
            this.isShow=true;
            this.rowId=val;
            //flag==当前点击的index     内容变成输入框
            this.flag=index
            this.name=this.phoneArr[index].name
             this.tel=this.phoneArr[index].tel
            //自动获取焦点
             this.$nextTick(()=>{
              console.log(this.$refs.editInput[0]);
              this.$refs.editInput[0].focus()
             })

        },
        //确定事件
        sure(val){
              
            //把新的内容传递给后端
            editApi({
                    id:val,
                    name:this.name,
                    tel:this.tel
                     }).then(res=>{
                      console.log(res);
                      
                         if(res.code==0){
                            this.flag="NaN"
                            this.getPhone()  
                         }
                     })
             
        },
        //关闭事件
        close(){
                this.flag="NaN"
                this.getPhone()            
        }



       

        //移入事件
        // onMouseOver(v){
        //   this.isBtnShow=true
        //   this.rowId=v     
        // },
        // onMouseLeave(){
        //   this.isBtnShow=false
        //   this.isShow=false
        //   // this.flag=true
        // },
       //点击编辑
        // edit(val,index){
        //   this.isBtnShow=false
        //   this.isShow=true
        //   // this.rowId=val  
        //   this.flag=index
        //   this.$nextTick(()=>{
        //    // console.log(this.$refs.editInput[index]);
        //     this.$refs.editInput[index].focus()
        //   })
           
        // },
        //点击对勾
        // openFn(val){
          
        // },
        //  //关闭
        // close(){
        //   this.isShow=false
        //   this.isBtnShow=true
        // },
      
       
       
    }

}
</script>

<style lang="less" scoped>
.el-radio-group{margin: 20px 0;}
 ul{
     width: 100%;
     display:flex; flex-wrap:wrap;
    li{list-style: none; margin: 10px 0;
        width: 33.3333%;
        display: flex;
        img{width: 30px;height: 30px;vertical-align: middle;
            margin: 10px 10px 0 0;}
        h3{font-weight: normal; font-size:14px;
        input{width: 80px;}
          
                  .el-button{width:10px;height: 10px;
                     margin-top:10px ;margin-left:10px;
                    /deep/i{display: block; margin-left:-6px;margin-top:-6px;}
                  }
                 
            
        }
        }
 }
 
</style>